<!DOCTYPE html>
<html lang="en">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<head>
    <meta charset="UTF-8">
    <title>基于cropper.js的图片裁剪</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <meta name="format-detection" content="telephone=no">
    <style>
        #showImgContainer,
        .tailoring-content {
            position: absolute;
            height: 100%;
            top: 0;
            bottom: 0;
            overflow: hidden;
        }

        #showImgContainer {
            width: 39.5%;
            right: 0;
            overflow-y: auto;
        }

        .tailoring-content {
            width: 100%;
            left: 0;
        }

        #showImgContainer img,
        .tailoring-content img {
            width: 100%;
        }

        #operationBtns,
        #firstBtns {
            position: fixed;
            bottom: 1%;
        }

        #secondBtns{
            position: fixed;
            bottom: 1%;
            right: 1%;
        }
        #noImage {
            border: 1px solid #ccc;
            margin: 10px auto;
            width: 98%;
            height: 90%;
            text-align: center;
            padding: 60% 0;
            box-sizing: border-box;
        }
        .cropper-bg{
            width: 100% !important;
            height: 100vh !important;
        }
    </style>
</head>

<body style="background: #fff">
    <div id="showImgContainer" >

        <img id="finalImg" style="max-width:100%;" src="">
    </div>


    <div class="tailoring-content">

    <div class="tailoring-content-two">
        <div class="tailoring-box-parcel">
        <img id="tailoringImg" src="" alt="Picture" style="height: 100%;width: auto">
        </div>
        <div id="firstBtns">
            <button class="l-btn cropper-reset-btn">全局模式</button>
            <button class="l-btn cropper-jianqie-btn">局部模式</button>
            <button class="l-btn" id="closeModalt">退出</button>

            <button style="display:none" class="l-btn" id="dayin"></button>
            <button style="display:none" class="l-btn" id="addSy">添加水印</button>
        </div>
        <div id="secondBtns">
            <button class="l-btn cropper-rotate-btn">旋转</button>
            <button class="l-btn cropper-big-btn">放大</button>
            <button class="l-btn cropper-small-btn">缩小</button>
            <button class="l-btn" id="sureCut">打印预览</button>
        </div>
    </div>
    </div>
</body>

</html>